<template>
  <!-- 自助发卡记录 -->
  <div class="swipe_details">
    <el-form :inline="true" :model="elform">
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="userName" placeholder="姓名" size="mini" clearable class="inpWidth"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="phoneNumber" placeholder="手机号" size="mini" clearable class="inpWidth"></el-input>
      </el-form-item>
      <el-form-item label="卡类型">
        <el-select v-model="cardtypes" placeholder="请选择" size="mini" clearable class="inpWidth">
          <el-option label="全部类型" value></el-option>
          <el-option
            v-for="item in cardtypesoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
        <el-button type="primary" @click="onExport" size="mini" icon="el-icon-document-copy">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="tablemain">
      <el-table
        v-loading="loading"
        :data="detailslist"
        ref="table"
        border
        highlight-current-row
        style="width: 100%"
        :header-cell-style="headFirst"
        :cell-style="(res) => headFirst_col(res, [])"
      >
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="userGroup" label="身份/分组"></el-table-column>
        <el-table-column prop="cardType" label="卡类型">
          <template slot-scope="scope">
            {{
            scope.row.cardType | cardtypesoptionType
            }}
          </template>
        </el-table-column>
        <el-table-column prop="phoneNumber" label="发卡手机号码" min-width="100px"></el-table-column>
        <el-table-column prop="limitPassword" label="发卡密码"></el-table-column>
        <el-table-column prop="cardBalance" label="卡内余额">
          <template slot-scope="scope">
            {{
            scope.row.cardBalance | amountyuan
            }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceFee" label="手续费">
          <template slot-scope="scope">
            {{
            scope.row.serviceFee | amountyuan
            }}
          </template>
        </el-table-column>
        <el-table-column prop="expiryDate" label="卡有效期" min-width="90px"></el-table-column>
        <el-table-column prop="issuingTime" label="发卡时间" min-width="150px"></el-table-column>
        <el-table-column prop="issuingState" label="领取状态">
          <template slot-scope="scope">
            {{
            scope.row.issuingState == 1 ? "已领取" : "未领取"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="receiveTime" label="领取时间" min-width="150px"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangepage"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="recordCount"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  data() {
    return {
      filename: '自助发卡记录',
      // 用户id
      userGuid: '',
      // 自己输入的房间号
      phoneNumber: '',
      departmentInfo: [],

      departmentGuid: '',
      groupingoption: [],
      groupingGuid: '',
      userName: '',
      datetime: [],
      time: [],
      cardtypes: '',
      // 类型列表
      cardtypesoption: [
        {
          label: 'A卡',
          value: 1
        },
        {
          label: 'B卡',
          value: 2
        },
        {
          label: '身份证UID',
          value: 3
        },
        {
          label: 'CPU学生卡',
          value: 4
        }
      ],
      elform: {},
      detailslist: [],
      loading: false,
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      recordCount: 0,
      searchInfo: {},
      //导出数据
      detailslistExportlist: [],
      //汇总合计
      totalto: false
    }
  },
  props: ['roomGuid'],
  filters: {
    cardtypesoptionType(val) {
      console.log(val)
      val = Number(val)
      switch (val) {
        case 1:
          return 'A卡'
          break
        case 2:
          return 'B卡'
          break
        case 3:
          return '身份证UID'
          break
        case 4:
          return 'CPU学生卡'
          break
        default:
          return ''
          break
      }
    }
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    this.time = ['00:00:00', '23:59:59']
  },
  mounted() {},
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  methods: {
    // 点击查询后触发
    onSubmit() {
      let searchInfo = {}
      this.pageNum = 1
      // 姓名  规则
      if (this.userName != '') {
        searchInfo.userName = this.userName
      }
      // 日期限定
      if (this.datetime != null) {
        if (this.datetime.length != 0) {
          searchInfo.startTime = this.datetime[0] + ' ' + this.time[0]
          searchInfo.endTime = this.datetime[1] + ' ' + this.time[1]
        }
      }
      // 类型限定
      if (this.cardtypes != '') {
        searchInfo.cardType = this.cardtypes
      }
      // 手机号限定
      if (this.phoneNumber != '') {
        searchInfo.phoneNumber = this.phoneNumber
      }
      searchInfo.unitGuid = this.changeschoolid
      this.searchInfo = searchInfo
      this.getList()
    },
    // 获取数据
    getList() {
      this.$http({
        url: this.$http.adornUrl('/card/card-self-issuing-search-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: this.pageNum,
            pageSize: this.pageSize,

            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '查询成功当前暂无数据',
            type: 'success'
          })
          this.recordCount = data.messageContent.recordCount
          this.detailslist = data.messageContent.data
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 导出数据
    onExport() {
      if (this.recordCount == 0) {
        this.$message({
          message: '无数据可导出',
          type: 'warning'
        })
        return false
      }
      this.$http({
        url: this.$http.adornUrl('/card/card-self-issuing-search-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            asc: true,
            pageNum: 1,
            pageSize: this.recordCount,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.outexecelinit(data.messageContent.data)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 通行记录导出方法
    outexecelinit(detailslist) {
      detailslist.map(item => {
        item.issuingState = item.issuingState == 1 ? '已领取' : '未领取'
        item.cardBalance = this.amountyua(item.cardBalance)
        item.serviceFee = this.amountyua(item.serviceFee)
        // 将类型转化为文字表述
        item.cardType = this.$options.filters.cardtypesoptionType(item.cardType)
        // this.cardtypesoption.map(itemOption => {
        //   if (item.cardType == itemOption.value) {
        //     item.cardType = itemOption.label;
        //     return;
        //   }
        // });
      })
      const nowtime = this.getimeto()
      require.ensure([], () => {
        const multiHeader = []
        const multiHeader2 = []
        const merges = []
        const { export_json_to_excel } = require('../../excel/Export2Excel')
        let tHeader = [
          '姓名',
          '身份/分组',
          '卡类型',
          '发卡手机号码',
          '发卡密码',
          '卡内余额',
          '手续费',
          '卡有效期',
          '发卡时间',
          '领取状态',
          '领取时间'
        ]

        const filterVal = [
          'userName',
          'userGroup',
          'cardType',
          'phoneNumber',
          'limitPassword',
          'cardBalance',
          'serviceFee',
          'expiryDate',
          'issuingTime',
          'issuingState',
          'receiveTime'
        ]
        const list = detailslist
        const data = this.formatJson(filterVal, list)
        export_json_to_excel({
          multiHeader, //这里是第一行的表头
          multiHeader2, //这里是第二行的表头
          header: tHeader, //这里应该是算第三行的表头
          data,
          merges,
          filename: this.filename + nowtime
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.swipe_details {
  padding: 10px;
  .el-table__row .el-table__row--level-1 {
    background-color: #e5e9f2;
  }
  .el-form-item {
    margin-bottom: 0px;
  }
  .inpWidth {
    width: 120px;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
   //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
}
</style>